import * as THREE from 'three';
// 引入性能监视器
import Stats from 'three/addons/libs/stats.module.js'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let controls,cubeArr = [],stats,mesh,spotLightHelper


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 1,首先要让渲染器支持阴影计算
renderer.shadowMap.enabled = true
// 轨道控制器
controls = new OrbitControls( camera, renderer.domElement );
camera.position.set(0,5,10) // 设置摄像机的位置

// 加入性能监视器
function createStats() {
    stats = new Stats()
    stats.setMode(0) // 0 每秒刷新帧数 1,每帧用时, 2,内存占用
    stats.domElement.style.position = 'fixed'
    stats.domElement.style.left = '0'
    stats.domElement.style.top = '0'
    document.body.appendChild(stats.domElement)

}

// 设置总体的坐标轴
function createAxes (){ // 总体的
    const axesHelper = new THREE.AxesHelper(20)
    scene.add(axesHelper)
}

// 创建聚光灯
function createLight() {
    // 聚光灯: 参数1:光源颜色,参数2: 光源强度,参数3: 光源最远发射距离,参数4:聚光灯发射角度(建议小于二分之Π,90度)
    // 参数5: 光斑周围的序号程度(0-1), 默认0 参数6: 光照衰减梁随着巨鹿越远,在这个值的基础上就越弱
    const spotLight = new THREE.SpotLight(0xffffff, 10,100,Math.PI / 6, 0.5, 1)
    spotLight.position.set(0,6,0)
    // 2,光源产生阴影(计算)
    spotLight.castShadow = true

    // 可以让图片作为光源的纹理,这里由于图片不透光,所以使用不了
    // spotLight.map = new THREE.TextureLoader().load('./assets/img/img01.jpg')
    // 让聚光灯照射球体
    spotLight.target = mesh
    scene.add(spotLight)
    // 聚光灯辅助线
    spotLightHelper = new THREE.SpotLightHelper(spotLight)
    // spotLightHelper.target = mesh
    scene.add(spotLightHelper)

}

// 创建一个球体，使用球体 + 标准的网格材质，来对灯光做出反应
function createSphere() {
    const geometery = new THREE.SphereGeometry(1,32,32)
    const material = new THREE.MeshStandardMaterial({
        color: 0xffff00
    })
    mesh = new THREE.Mesh(geometery, material)
    scene.add(mesh)
    // 3,物体产生阴影
    mesh.castShadow = true
}
// 添加一个地面，来了解环境光
function createGround() {
    const geometery = new THREE.PlaneGeometry(100,100)
    // side用来据定哪一面被渲染,roughness: 粗糙度(0:光滑-1:粗糙)
    const material = new THREE.MeshStandardMaterial({color: 0xffffff,side: THREE.DoubleSide,roughness:0.5 })   
    const plane = new THREE.Mesh(geometery, material)
    plane.position.set(0,-1,0)
    scene.add(plane)
    plane.rotation.x = -Math.PI / 2
    // 4,地面接收阴影
    plane.receiveShadow = true
}


// 设置动画效果,并让物体动起来
let speed = 0.01
function animate() {
	requestAnimationFrame( animate );
    mesh.position.x +=speed
    mesh.position.z += speed
    if(mesh.position.x >= 5 ){
        speed = -0.01
    }else if(mesh.position.x <= -5) {
        speed = 0.01
    }
    // if(mesh.position.x === 5) {
    //     mesh.position.x-=speed
    //     metsh.position.z += speed
    // }
    // 不断更新聚光灯的辅助线
    spotLightHelper.update()
    stats.update()
	controls.update()
	renderer.render( scene, camera );
}
// 根据窗口大小自动按比例缩放
function resize () {
    window.addEventListener('resize', () => {
        renderer.setSize(window.innerWidth,window.innerHeight)
        camera.aspect = window.innerWidth/window.innerHeight
        camera.updateProjectionMatrix()
    })
}

resize()
createStats()
createGround()
createSphere()
createAxes()
createLight()


animate()






